<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    int uid = 2;
%>
<html>
<head>
    <title>在线面试-企业端</title>
    <meta content='IE=edge' http-equiv='X-UA-Compatible'>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="js/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="js/bootstrap/3.2.0/css/docs.css">
    <link rel="stylesheet" href="css/live/live.css"/>
    <link rel="stylesheet" href="js/tips/css/tips.css"/>
    <script>
        window.console = window.console || {
            log:function(a){
                $('<div>'+ JSON.stringify(a) +'</div>').appendTo($(document.body));
            }
        }
    </script>
    <style>
        .btn-primary {
            outline: none;
            padding: 0 12px;
            cursor: pointer;
            border: 1px solid transparent;
            border-radius: 4px;
            vertical-align: bottom;
            color: #fff;
            background-color: #428bca;
            border-color: #357ebd;
            height: 24px;
        }

        .btn-primary:hover {
            background-color: #3276b1;
        }
    </style>
</head>
<body>
<div class="jumbotron">
    <div class="container">

        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-6">
                <h2>
                    <small>在线列表</small>
                </h2>
                <div class="container" style="width: 100%;">
                    <div class="list-group" id="list_group">

                    </div>
                </div>
            </div>
            <div class="col-xs-6 col-md-6">
                <h2>
                    <small>视频窗口</small>
                </h2>
                <div class="container" style="width: 100%;">
                    <div class="panel panel-default" >
                        <div class="panel-body">
                            <div id="liveMedia">
                                <h1>Alternative content</h1>
                                <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
                            </div>
                        </div>
                    </div>
                    <!--<div class="form-group has-success has-feedback">
                        <label class="control-label" for="message">请文明发言,勿刷屏,按回车键发送消息</label>
                        <input type="text" class="form-control" id="message" placeholder="输入你想对大家说的话">
                    </div>-->
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.json-2.4.js"></script>
<script src="js/flash-websocket/swfobject.js"></script>
<script type="text/javascript">
    // Set URL of your WebSocketMain.swf here:
    WEB_SOCKET_SWF_LOCATION = "js/flash-websocket/WebSocketMainInsecure.swf";
    // Set this to dump debug message from Flash to console.log:
    WEB_SOCKET_DEBUG = true;
    //WEB_SOCKET_FORCE_FLASH = true;
</script>
<script src="js/flash-websocket/web_socket.js"></script>
<script src="js/MaoSuiWebSocket.js"></script>
<script src="js/swfJs/interview.js"></script>
<script type="application/javascript">
    var info = {
        uid: parseInt('<%=uid%>'),
        cid: 1
    };

    var currentUID = 0;

    var server = new LiveServer('ws://' + location.hostname + ':8080/live', {uid: info.uid, cid: info.cid});
    server.addEventListener({
        open: function(d){
            console.log('open', d);
        },
        init: function(d){
            console.log('init', d)
        },
        message: function(d){
            console.log('message', d)
        },
        queue: function(data){
            if(data && $.isArray(data)){
                var html = '';
                for(var i=0;i<data.length;i++){
                    html += '<a href="javascript:;" id="user_'+data[i][0]+'" onclick="liveToUser('+data[i][0]+')" class="list-group-item">\
                        <h4 class="list-group-item-heading">'+data[i][1]+'</h4>\
                <p class="list-group-item-text">   '+new Date(data[i][4].time).toLocaleString()+'</p>\
                </a>'
                }
                $('#list_group').html(html);
            }
            console.log(data)
        },
        seeker_online: function(data){
            $('<a href="javascript:;" id="user_'+data.id+'" onclick="liveToUser('+data.id+')" class="list-group-item">\
                            <h4 class="list-group-item-heading">'+data.username+'</h4>\
                    <p class="list-group-item-text">   '+data.lastlogintime.time+'</p>\
                    </a>').appendTo($('#list_group'));
        },
        seeker_offline: function(id){
            $('#user_' + id).remove();
        },
        agent: function(id){
            currentUID = id;
            interView.receive(id)
            interView.publish(info.cid)
        },
        hangUp: function(id){
            interView.receiveStop();
            currentUID = 0;
        },
        error: function(d){
            alert(d)
        }
    });

    server.connect();

    var interView = new InterView('liveMedia');
    interView.init = function(self){
        console.log("swf 加载成功");
    };
    //设备选择成功
    interView.equipOK = function(){
        this.publish(info.cid); //发布视频ID
    };

    interView.activeOff = function(){
        if(confirm("你确定要断开当前视频？")){
            interView.hangUp();
            server.sendEventToUser(currentUID, 'hangUp', info.uid);//向企业发送挂断信息
            currentUID = 0;
        }
    };

    interView.__init('js/');

    function liveToUser(id){
        server.sendEventToUser(id, 'liveInit', {liveId: info.cid}); //将视频房间号发送给该用户
    }
</script>
</body>
</html>
